<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		
		<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

        <link rel="stylesheet" type="text/css" href="css/common.css"/>
        <link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css"/>
		<title>复旦大学EMBA</title>
	</head>
	<body class="grey">
		
        <div class="page">

            <div class="search-head-box flex items-center">
                <div class="search-select-box">
                    <span class="select">师资</span>
                    <div class="search-select-choose">
                        <div>课程</div>
                        <div class="onthis">师资</div>
                        <div>校友</div>
                        <div>活动</div>
                        <div>资讯</div>
                    </div>
                </div>
                <div class="search-select-box">
                    <span class="select">师资</span>
                    <div class="search-select-choose">
                        <div>课程</div>
                        <div class="onthis">师资</div>
                        <div>校友</div>
                        <div>活动</div>
                        <div>资讯</div>
                    </div>
                </div>
                <div class="search-input-box flex items-center">
                    <input type="text" />
                    <i class="iconfont icon-sousuo1"></i>
                </div>
                <button id="back">取消</button>
            </div>

            <!--<div class="search-title">搜索结果</div>-->
            <div class="search-choose-bar flex">
                <div class="onthis">文章</div>
                <div>视频</div>
            </div>

            <div class="search-list-box" id="searchArticle">
                <div class="search-list-item">
                    <a href="article_detail.html">这里是文章标题，这里是文章标题可显示两行。这里是文章标题，这里是文章标题可显示两行。</a>
                    <div class="search-list-item-date">2018年10月26日  10:00</div>
                </div>
                <div class="search-list-item">
                    <a>这里是文章标题，这里是文章标题可显示两行。这里是文章标题，这里是文章标题可显示两行。</a>
                    <div class="search-list-item-date">2018年10月26日  10:00</div>
                </div>
                <div class="search-list-item">
                    <a>这里是文章标题，这里是文章标题可显示两行。这里是文章标题，这里是文章标题可显示两行。</a>
                    <div class="search-list-item-date">2018年10月26日  10:00</div>
                </div>
                <div class="search-list-item">
                    <a>这里是文章标题，这里是文章标题可显示两行。这里是文章标题，这里是文章标题可显示两行。</a>
                    <div class="search-list-item-date">2018年10月26日  10:00</div>
                </div>
                <div class="search-list-item">
                    <a>这里是文章标题，这里是文章标题可显示两行。这里是文章标题，这里是文章标题可显示两行。</a>
                    <div class="search-list-item-date">2018年10月26日  10:00</div>
                </div>
                <div class="search-list-item">
                    <a>这里是文章标题，这里是文章标题可显示两行。这里是文章标题，这里是文章标题可显示两行。</a>
                    <div class="search-list-item-date">2018年10月26日  10:00</div>
                </div>
                <div class="search-list-item">
                    <a>这里是文章标题，这里是文章标题可显示两行。这里是文章标题，这里是文章标题可显示两行。</a>
                    <div class="search-list-item-date">2018年10月26日  10:00</div>
                </div>
                <div class="search-list-item">
                    <a>这里是文章标题，这里是文章标题可显示两行。这里是文章标题，这里是文章标题可显示两行。</a>
                    <div class="search-list-item-date">2018年10月26日  10:00</div>
                </div>
            </div>
            <div class="search-list-box" id="searchVideo" style="display: none">
                <div class="search-list-item video">
                    <a>知识产权的四大版块，与你息息相关</a>
                    <div class="class-video-box teacher flex">
                        <div class="video-play-btn"></div>
                        <img src="img/video_cover_demo1.jpg" alt="">
                        <video preload="auto" src="video.mp4"></video>
                    </div>
                </div>
                <div class="search-list-item video">
                    <a>知识产权的四大版块，与你息息相关</a>
                    <div class="class-video-box teacher flex">
                        <div class="video-play-btn"></div>
                        <img src="img/video_cover_demo1.jpg" alt="">
                        <video preload="auto" src="video.mp4"></video>
                    </div>
                </div>
            </div>
            <div class="no-more"><img src="img/no_more_img.png" width="100%" alt=""></div>
        </div>
		
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('.search-choose-bar>div').click(function (e) {
                $('.search-choose-bar>div').removeClass('onthis');
                $(this).addClass('onthis');
                if($(this).index() == 0){
                    $('#searchArticle').show();
                    $('#searchVideo').hide();
                }else{
                    $('#searchVideo').show();
                    $('#searchArticle').hide();
                }
            });
            
            $('.select').click(function (e) {
                if ($(this).parent('.search-select-box').hasClass('open')) {
                    $(this).parent('.search-select-box').removeClass('open');
                    $(this).next('.search-select-choose').hide();
                }else {
                    $(this).parent('.search-select-box').addClass('open');
                    $(this).next('.search-select-choose').show();
                }
            });

            $('.search-select-choose > div').click(function (e) {
                $(this).parent().parent('.search-select-box').removeClass('open');
                $('.search-select-choose').hide();
                $(this).siblings('div').removeClass('onthis');
                $(this).addClass('onthis');
                $(this).parent().prev('.select').html($(this).html());
            });

            $('#back').click(function (e) {
                window.history.go(-1);
            });

            $('.video-play-btn').click(function (e) {
                $(this).hide();
                $(this).next('img').hide();
                var video = $(this).siblings('video');
                $('#my_video').show();
                video.trigger('play');
                document.addEventListener("WeixinJSBridgeReady", function() {
                    video.play();
                }, false);
                video.addEventListener("ended", function() {
                    //alert("播放结束");
                    $('#my_video').hide();
                    $('.video-play-btn').show();
                    $('.video-play-btn').next('img').show();
                })
            });
        </script>
	</body>
</html>
